import React, { Component } from 'react';

import { Card, Table, Space, message } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';

import AddCategory from './AddCategory';
import ChangeCategory from './ChangeCategory';
import LinkButton from '../../components/LinkButton';

import { reqCategory } from '../../api';


/**
 * 品类管理
*/
export default class Category extends Component {

    state = {
        data: [],
        loading: true,
        path: [],
        currentPage: 1,
        pageSize: 10
    }

    columns = [
        {
            title: '分类名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '操作',
            key: 'action',
            width: 300,
            render: record => (
                <Space size="middle">
                    <ChangeCategory record={record} refresh={() => this.refresh()} />
                    {
                        this.state.path.length >= 2 ? '' : <LinkButton onClick={() => this.showSubCategroy(record)}>查看子分类</LinkButton>
                    }
                </Space>
            ),
        },
    ];

    async refresh(cb) {
        this.setState({ loading: true });
        const { path } = this.state;

        const res = await reqCategory(path[path.length - 1].id);
        if (res.status === 0) {

            const path = [...this.state.path];

            path[path.length - 1].data = res.data;

            this.setState({
                data: res.data,
                loading: false,
                path
            }, () => {
                cb && cb();
            })
        } else {
            message.error(res.msg);
            this.setState({ loading: false });
        }
    }

    async getCategory(record) {
        this.setState({ loading: true });
        const { _id: id, name } = record;
        const res = await reqCategory(id);
        if (res.status === 0) {
            const { path, currentPage } = this.state;
            const len = path.length;
            this.setState({
                data: res.data,
                loading: false,
                path: [...path, { id, name, currentPage, data: res.data, title: len === 0 ? '分类列表' : record.name }]
            })
        } else {
            message.error(res.msg);
            this.setState({ loading: false });
        }
    }

    backTo(id) {
        const { path } = this.state;
        for (let i = 0, len = path.length; i < len; i++) {
            if (path[i].id === id) {
                const newPath = path.slice(0, i + 1);
                const len = newPath.length;
                const { data, currentPage } = newPath[len - 1];
                this.setState({
                    data,
                    currentPage,
                    loading: false,
                    path: newPath
                })
                break;
            }
        }
    }

    showSubCategroy(record) {
        this.getCategory(record);
    }

    changePage(page) {
        const { path } = this.state;
        path[path.length - 1].currentPage = page;
        this.setState({ currentPage: page });
    }

    changeSize(_, pageSize) {
        this.setState({ pageSize })
    }

    componentDidMount() {
        this.getCategory({ _id: 0, name: '一级分类' });
    }

    render() {
        const { columns } = this;
        const { data, loading, path, currentPage, pageSize } = this.state;
        return (
            <div>
                <Card
                    title={
                        <Space>
                            {path.map((item, idx) => {
                                const { id, title } = item;
                                if (idx === path.length - 1) {
                                    return item.title;
                                }
                                return (
                                    <Space key={id}>
                                        <LinkButton onClick={() => this.backTo(id)}>{title}</LinkButton>
                                        <ArrowRightOutlined />
                                    </Space>
                                )
                            })}
                        </Space>
                    }
                    extra={<AddCategory path={path} refresh={() => this.refresh()} />}
                >
                    <Table
                        bordered
                        scroll={{ y: 450 }}
                        columns={columns}
                        loading={loading}
                        dataSource={data}
                        rowKey="_id"
                        pagination={{
                            showSizeChanger: true,
                            responsive: true,
                            showQuickJumper: true,
                            pageSize,
                            defaultCurrent: 1,
                            current: currentPage,
                            onChange: (page) => this.changePage(page),
                            onShowSizeChange: (current, pageSize) => this.changeSize(current, pageSize)
                        }}
                    />
                </Card>
            </div>
        )
    }
}
